<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
</head>
<body>
<div id="app">
  <span v-if="isUser">
    <label for="userName">用户账号</label>
    <input type="text" id="userName" placeholder="请输入用户账号" key="userName" />
  </span>

  <span v-else>
    <label for="userEmail">用户邮箱</label>
    <input type="text" id="userEmail" placeholder="请输入用户邮箱" key="userEmail" />
  </span>

  <button @click="btnClick">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    },
    methods: {
      btnClick() {
        this.isUser = !this.isUser;
      }
    }
  });
</script>
</body>
</html>